<template>
	<div class="myPage" style="position: relative;">
		<div class="container"
			style="flex: 1;z-index: 2;background: #f3f3f3;flex-direction: column;height: 100%;display: flex;justify-content: start;">

			<div style="position: relative;">
				<div style="position: absolute;width: 100%;height: 100%;background-color: white;z-index: -1;">

				</div>
				<fui-nav-bar fontWeight="bold" style="" background="transparent" color="#000" title="中考体育"
					@rightClick="rightClick">
					<div
						style="border: 1px solid #eeeeee;background: white;border-radius: 32rpx;padding: 6rpx;display: flex;flex-direction: row;width: 200rpx;justify-content: space-around;">
						<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="leftClick" color="black"
							name="arrowleft"></fui-icon>
						<div class="link-column" style=""></div>
						<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="gotoHome" color="black"
							name="home"></fui-icon>
					</div>
					<template v-slot:right>

					</template>
				</fui-nav-bar>

				<div style="padding: 16rpx;display: flex;align-items: flex-start;">
					<div style="flex: 1;display: flex;overflow-x: scroll;">
						<!-- 					<fui-dropdown-menu style="flex: 1;" :isCheckbox="false" selectedColor="#FF2B2B" splitLine
							:options="options" ref="ddmTag" direction="down" @click="tagItemClick" @close="tagClose">
							<view style="box-shadow: 0 0 10px rgb(89 102 122 / 10%) !important;"
								class="fui-select fui-flex__between" @tap="tagTap">
								<text style="margin-right: 16rpx;">{{tag}}</text>
								<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
									<fui-icon name="turningdown" :size="32"></fui-icon>
								</view>
							</view>
						</fui-dropdown-menu> -->
						<MyDropdownMenu @onSelect="onReqYearSelect" ref="reqYearSelect" :tittle="'年级'"
							:options="options2"></MyDropdownMenu>
						<MyDropdownMenu @onSelect="onReqClassSelect" ref="reqClassSelect" :tittle="'班级'"
							:options="classList"></MyDropdownMenu>
						<MyDropdownMenu @onSelect="onReqSemesterSelect" :tittle="'当前学期'" :options="semesterList">
						</MyDropdownMenu>

					</div>

					<fui-bubble-box height="64rpx" :right="100" style="margin-left: 16rpx;height: 64rpx;" :items="items"
						direction="bottom" position="absolute" :show="show" @click="itemClick" @close="onClose">
						<fui-button @click="bubble" background="#eeeeee" color="#f7f7f7" height="64rpx" width="80rpx"
							radius="96rpx" style="box-sizing: border-box;">
							<fui-icon size="42" name="menu"></fui-icon>
						</fui-button>
					</fui-bubble-box>
				</div>
				<div style="display: flex;align-items: flex-end;padding: 16rpx 32rpx;">
					<div style="font-size: 32rpx;">人数：</div>
					<div style="font-size: 48rpx;">{{stuCount}}</div>
				</div>
			</div>

			<div style="flex: 1;overflow-y: scroll;">
				<div @click="gotoExamDetail(item)" v-for="(item,index) in examSubInfoList"
					style="display: flex;flex-direction: column;margin: 16rpx;background: white;padding: 16rpx 32rpx;border-radius: 8rpx;align-items: center;">
					<div style="width: 100%;font-weight: bolder;">
						{{item.name}}
					</div>
					<div style="width: 98%;background: #e0e4f0;height: 1.5rpx;margin: 0rpx 16rpx;margin: 16rpx 8rpx;">
					</div>
					<div style="width: 100%;height: 72rpx;display: flex;align-items: center;font-size: 32rpx;">
						完成度：{{item.completeCount==null?0:item.completeCount}}/{{item.totalCount==null?0:item.totalCount}}
						<div style="flex: 1;text-align: center;display: flex;align-items: center;">

						</div>
						<div style="color: orange;">
							成绩管理
							<fui-icon color="orange" size="42" name="arrowright"></fui-icon>
						</div>

					</div>
				</div>
			</div>


			<!-- <div style="position: absolute;width: 100%;bottom: 0rpx;">
				<div style="width: 100%;height: 80rpx;background-color: white;text-align: center;display: flex;align-items: center;justify-content: center;">ss</div>
				<fui-digital-keyboard style="display: block !important;position: relative;" :show="true"
					:background="background" :decimal="true" spareKey="取消" :theme="theme" @click="keyClick"
					@confirm="confirm" @backspace="backspace" @spare="spare"></fui-digital-keyboard>
				<fui-safe-area></fui-safe-area>
			</div> -->
		</div>
	</div>

	<!-- <fui-picker linkage title="请选择年级" :layer="1" :options="options2" :show="showSelectYear" @change="change"
		@cancel="onShowSelectYearCancel"></fui-picker>

	<fui-picker linkage title="请选择班级" :layer="1" :options="addClassList" :show="showSelectClass" @change="classChange"
		@cancel="onShowSelectYearCancel"></fui-picker> -->
</template>

<script>
	import request from "/request/request.js"
	export default {
		data() {
			return {

				showAddClass: false,
				showSelectClass: false,
				total: 0,
				current: 1,
				show: false,
				showDialog: false,
				classList: [],

				selectYear: null,
				tag: '不限',
				tagShow: false,
				options: [{
					text: '不限',
					value: null,
					src: '',
					checked: true,

				}, {
					text: '七年级',
					value: 1,
					src: '',
					checked: false
				}, {
					text: '八年级',
					value: 2,
					src: '',
					checked: false
				}, {
					text: '九年级',
					value: 3,
					src: '',
					checked: false
				}],
				options2: [{
					text: '七年级',
					value: 1,
					src: '',
					checked: false
				}, {
					text: '八年级',
					value: 2,
					src: '',
					checked: false
				}, {
					text: '九年级',
					value: 3,
					src: '',
					checked: false
				}],
				semesterList: [{
					text: '当前学期',
					value: null,
					checked: true
				}, {
					text: '七年级上学期（第一学期）',
					value: 1
				}, {
					text: '七年级下学期（第二学期）',
					value: 2
				}, {
					text: '八年级上学期（第三学期）',
					value: 3
				}, {
					text: '八年级下学期（第四学期）',
					value: 4
				}, {
					text: '九年级上学期（第五学期）',
					value: 5
				}, {
					text: '九年级下学期（第六学期）',
					value: 6
				}],

				showSelectYear: false,



				items: [
					// {
					// 	text: '添加学生',
					// 	src: '/static/images/common/logo.png'
					// }
				],
				show: false,
				studentList: [],
				selectReqClass: {},
				selectReqSex: {},
				selectReqSemester: {
					value:null
				},
				examSubInfoList: [],
				stuCount: 0,
			}
		},
		onLoad() {
			console.log("onLoad");
			this.getAllClass();

			setTimeout(() => {
				this.$refs.reqYearSelect.reset();
			}, 500)
		},

		methods: {
			gotoExamDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/examDetailManage/examDetailManage?subId=" + item.id 
					+ "&subName=" + item.name 
					+ "&year=" + this.selectYear
					+ "&classId=" + this.selectReqClass.value
					+ "&semester=" + this.selectReqSemester.value
				})
			},
			leftClick() {
				uni.navigateBack();
			},
			gotoHome() {
				getApp().gotoHome();
			},
			showTest() {
				this.show = true;
			},
			onReqYearSelect(e) {
				console.log(e);
				this.selectYear = e.value;
				this.getAllClass();
				this.$refs.reqClassSelect.reset();
			},
			onReqClassSelect(e) {
				console.log(e);
				this.selectReqClass = e;
				this.getAllExamSubByClass();
			},
			onReqSemesterSelect(e) {
				console.log(e);
				this.selectReqSemester = e;
				this.getAllExamSubByClass();
			},
			getAllClass() {
				let that = this;
				request({
					url: `/class/getAllClass`,
					method: 'POST',
					data: {
						current: that.current,
						grade: that.selectYear
					}
				}).then((res) => {
					that.classList = [];
					if (res.data.records.length == 0) {
						that.classList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.records.length; i++) {
						let obj = {
							text: res.data.records[i].className,
							value: res.data.records[i].id,
						}
						that.classList.push(obj);
					}
					console.log(res);
				}, (err) => {
					console.log('fail' + err);
				});
			},
			tagTap() {
				this.$refs.ddmTag.show()
				this.tagShow = true;
			},
			tagItemClick(e) {
				console.log(e)
				this.tag = e.text;
				this.selectYear = e.value;
				this.tagClose();
				this.getAllClass();
			},
			tagClose() {
				this.tagShow = false;
			},
			//显示气泡框
			bubble() {
				this.show = true
			},
			//气泡框item点击事件
			itemClick(e) {
				console.log(e)
				if (e.index == 0) {
					this.showAddClass = true;
				}
				this.onClose()
			},
			//隐藏气泡框
			onClose() {
				this.show = false
			},

			onShowSelectYearCancel(e) {
				this.showSelectYear = false
				this.showSelectClass = false;
			},
			change(e) {
				let that = this;
				this.showSelectYear = false;
				this.addStudentClass = {};

				this.addStudentYear = e;
				console.log(e);
				request({
					url: `/class/getAllClass`,
					method: 'POST',
					data: {
						grade: this.addStudentYear.value
					}
				}).then((res) => {
					that.addClassList = [];
					if (res.data.records.length == 0) {
						that.addClassList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.records.length; i++) {
						let obj = {
							text: res.data.records[i].className,
							value: res.data.records[i].id,
						}
						that.addClassList.push(obj);
					}
					console.log(res);
				}, (err) => {
					console.log('fail' + err);
				});
			},
			getAllExamSubByClass() {
				console.log(this.selectReqSemester);
				let that = this;
				request({
					url: `/exam/getAllExamSubByClass`,
					method: 'POST',
					data: {
						year: that.selectYear,
						classId: this.selectReqClass.value,
						semester: this.selectReqSemester.value
					}
				}).then((res) => {
					console.log(res);
					that.stuCount = res.data.stuCount;
					that.examSubInfoList = res.data.subjectWithCompletionRateResList;
				}, (err) => {
					console.log('fail' + err);
				});
			}
		}
	}
</script>

<style scoped>
	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}

	.fui-list__cell {
		width: 100%;
	}

	.fui-select {
		flex: 1;
		height: 80rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.fui-select::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 200%;
		height: 200%;

		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none;
	}

	.fui-flex__center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fui-flex__between {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>